<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+52)+'px'}">
		<!-- 头部 -->
		<c-nav-bar title="我的预约"></c-nav-bar>

		<!-- <TopTabs2 :list="tab" @changeTab="change" :top="mt"></TopTabs2> -->

		<TopTabs3 :list="tabList" @changeTab="changeTab" :top="mt"></TopTabs3>

		<view class="orders">
			<view class="card" v-for="(item,index) in orderList" :key="index">
				<view class="right">
					<image :src="item.appearancePic" mode="aspectFill"></image>
					<text class="text1" v-if="item.reservationType==1">待核销</text>
					<text class="text" v-if="item.reservationType==2">已核销</text>
					<text class="text" v-if="item.reservationType==3">已过期</text>
					<text class="text" v-if="item.reservationType==4">已取消</text>
					<!-- <text v-else></text> -->
				</view>
				<view class="left">
					<view class="title">
						<view class="one">
							{{item.venuesName}}
						</view>
						<view class="two" @click="navdetails(item)">
							详情 <u-icon name="arrow-right" color="#466491"></u-icon>
						</view>
					</view>
					<view class="text">
						<view class="one">
							<u-icon name="clock" color="#999999" size="24"></u-icon>
							<text style="margin-left: 10rpx;">参观时间：{{item.reservationStartTime}}</text>
						</view>
						<view class="two">
							<u-icon name="account" color="#999999" size="24"></u-icon>
							<text style="margin-left: 10rpx;"> 预约人：{{item.applicantsIntel}}</text>
						</view>
					</view>
				</view>
			</view>





		</view>

		<!-- 	<view style="background: white;" v-if="orderList.length ==0">
			<nodata></nodata>
		</view> -->
		<nodata v-if="orderList.length === 0"></nodata>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index1.vue'
	import TopTabs3 from '@/compoments/TopTabs/TopTabs3.vue';
	import TopTabs2 from '@/compoments/TopTabs/TopTabs2.vue';
	export default {
		name: 'landmarkTicketOrder',
		components: {
			nodata,
			TopTabs3,
			TopTabs2
		},
		data() {
			return {
				mysearch: '',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				tabList: [{
						name: '全部'
					},
					{
						name: '待核销'
					},
					{
						name: '已核销'
					},
					{
						name: '已取消'
					}
				],
				orderList: [],
				current: 0,
				fromData: {
					limit: 10,
					page: 1,
					openId: '',
					reservationType: ''
				},
				changeIndex: 0,
			}
		},
		onLoad() {
			this.getFishermanOrder()
		},
		methods: {

			// 去文化场馆详情
			navdetails(item) {
				uni.navigateTo({
					url: '/pagesMy/culturalTour/details?list=' + JSON.stringify({
						...item
					})
				})
			},
			// tab切换
			changeTab(item) {
				console.log('-----', item);
				this.itemIndex = item
				if (item == 0) {
					this.fromData.reservationType = ''
					this.getFishermanOrder()
				} else if (item == 1) {
					this.fromData.reservationType = 1
					this.getFishermanOrder()
				} else if (item == 2) {
					this.fromData.reservationType = 2
					this.getFishermanOrder()
				} else if (item == 3) {
					this.fromData.reservationType = 3
					this.getFishermanOrder()
				} else if (item == 4) {
					this.fromData.reservationType = 4
					this.getFishermanOrder()
				}

			},
			// 返回首页
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			},
			getFishermanOrder() {
				this.fromData.openId = JSON.parse(uni.getStorageSync('userInfo')).openId
				this.$api.get('/api/culturalVenues/viewType', this.fromData).then(res => {
					console.log(res);
					this.orderList = res.data.data.list
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.u-tabs {
		position: fixed !important;
		background-color: #fff !important;
		z-index: 999 !important;
		width: 100% !important;
	}

	.page {
		background: #F5F8FA;
		padding: 100rpx 0 1rpx;
		box-sizing: border-box;

		.orders {
			padding: 0 24rpx 24rpx;
			box-sizing: border-box;

			.card {
				box-sizing: border-box;
				display: flex;
				padding: 20rpx;
				// border-top: 1rpx solid #EFEFEF;
				background-color: #fff;
				margin: 10rpx 0;
				border-radius: 10rpx;
			}

			.left {
				width: 496rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				box-sizing: border-box;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40rpx;
					box-sizing: border-box;
					width: 100%;

					.one {
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
						// margin-bottom: 30rpx;
						// margin-right: 24rpx;
						width: 80%;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 指定最大行数 */
						-webkit-box-orient: vertical;
						/* 垂直排列文本 */
						overflow: hidden;

					}

					.two {
						// margin-top: 12rpx;
						font-size: 26rpx;
						color: #466491;
						font-weight: Regular;
						display: flex;
						align-items: center;
						width: 20%;
						text-align: center;

					}

				}

				.text {
					width: 100%;
					font-size: 24rpx;
					font-weight: Regular;
					color: #999999;

					.one {
						display: flex;
						// margin-bottom: 12rpx;
					}

					.two {
						margin-top: 12rpx;
						display: flex;
					}
				}
			}

			.right {
				width: 154rpx;
				height: 154rpx;
				border-radius: 10rpx;
				margin-right: 19rpx;
				position: relative;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}

				.text1 {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					color: #ffffff;
					background: #007A69;
					border-radius: 10rpx 0 10rpx 0;
					padding: 2rpx 5rpx;
				}

				.text {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					color: #ffffff;
					background: #cccccc;
					border-radius: 10rpx 0 10rpx 0;
					padding: 2rpx 5rpx;
				}

			}

		}
	}
</style>
<style lang="scss">
	.nodatadiv {
		height: 75vh !important;
		padding: 0 !important;
	}

	.u-tabs__wrapper__nav__line {
		left: 20rpx !important
	}
</style>